<!-- src/components/PostEditor.vue -->
<template>
  <div class="app-container">
    <div class="header">
      <div class="logo">
        <i class="fas fa-store logo-icon"></i>
        <h1 class="logo-text">校园集市</h1>
      </div>
      <p class="slogan">发布你的校园信息，连接校园生活</p>
    </div>

    <div class="post-editor-container">
      <!-- 左侧编辑区 -->
      <div class="editor-section">
        <div class="section-title">
          <i class="fas fa-edit"></i>
          <span>编辑帖子内容</span>
        </div>

        <!-- 标题 -->
        <div class="form-item">
          <el-input
            v-model="post.title"
            placeholder="请输入帖子标题（5-50字）"
            maxlength="50"
            show-word-limit
            size="large"
          >
            <template #prefix>
              <i class="fas fa-heading"></i>
            </template>
          </el-input>
        </div>

        <!-- 分类 -->
        <div class="form-item">
          <div class="section-title" style="margin-bottom: 15px; font-size: 16px;">
            <i class="fas fa-tag"></i>
            <span>选择分类</span>
          </div>
          <div class="category-tags">
            <div
              v-for="(category, index) in categories"
              :key="index"
              class="category-tag"
              :class="{ active: post.category === category.value }"
              @click="post.category = category.value"
            >
              <i :class="category.icon"></i> {{ category.label }}
            </div>
          </div>
        </div>

        <!-- 内容 -->
        <div class="form-item">
          <div class="section-title" style="margin-bottom: 15px; font-size: 16px;">
            <i class="fas fa-align-left"></i>
            <span>详细内容</span>
          </div>
          <el-input
            v-model="post.content"
            type="textarea"
            :rows="8"
            placeholder="请输入详细内容..."
            maxlength="1000"
            show-word-limit
            resize="none"
          ></el-input>
        </div>

        <!-- 图片上传 -->
        <div class="form-item">
          <div class="section-title" style="margin-bottom: 15px; font-size: 16px;">
            <i class="fas fa-images"></i>
            <span>添加图片</span>
          </div>
          <div class="upload-container" @click="triggerUpload">
            <i class="fas fa-cloud-upload-alt upload-icon"></i>
            <div class="upload-text">点击或拖拽图片到此处上传</div>
            <div style="color: #909399; font-size: 13px">
              支持 JPG/PNG 格式，最多9张图片，每张不超过5MB
            </div>
          </div>
          <input
            type="file"
            ref="fileInput"
            style="display: none"
            multiple
            accept="image/*"
            @change="handleFileUpload"
          >

          <div class="image-list" v-if="post.images.length">
            <div class="image-item" v-for="(image, index) in post.images" :key="index">
              <img :src="image.url" alt="上传的图片">
              <div class="image-remove" @click="removeImage(index)">
                <i class="fas fa-times"></i>
              </div>
            </div>
          </div>
        </div>

        <div class="divider"></div>

        <div class="action-buttons">
          <el-button type="primary" size="large" @click="handleSubmit" style="padding: 0 40px;">
            <i class="fas fa-paper-plane"></i> 发布帖子
          </el-button>
          <el-button size="large" @click="resetForm" style="padding: 0 40px;">
            <i class="fas fa-redo"></i> 重置
          </el-button>
        </div>
      </div>

      <!-- 右侧预览区 -->
      <div class="preview-section">
        <div class="section-title">
          <i class="fas fa-eye"></i>
          <span>实时预览</span>
        </div>

        <div class="preview-content">
          <div v-if="post.title || post.content || post.images.length">
            <div class="preview-title">{{ post.title || '无标题' }}</div>

            <div class="preview-meta">
              <div class="preview-meta-item">
                <i class="fas fa-tag"></i>
                <span>{{ selectedCategoryLabel }}</span>
              </div>
              <div class="preview-meta-item">
                <i class="fas fa-user"></i>
                <span>校园用户</span>
              </div>
              <div class="preview-meta-item">
                <i class="fas fa-clock"></i>
                <span>刚刚</span>
              </div>
            </div>

            <p class="preview-text">{{ post.content || '暂无内容' }}</p>

            <div class="preview-images" v-if="post.images.length">
              <img
                v-for="(image, index) in post.images"
                :key="index"
                :src="image.url"
                class="preview-image"
                alt="预览图片"
              >
            </div>
          </div>
          <div v-else class="empty-preview">
            <i class="fas fa-file-alt"></i>
            <h3>编辑内容后预览效果将显示在这里</h3>
            <p>开始输入标题和内容吧</p>
          </div>
        </div>

        <div class="tip-box">
          <div class="tip-title">
            <i class="fas fa-lightbulb"></i>
            <span>发帖小贴士</span>
          </div>
          <ul class="tip-list">
            <li>
              <i class="fas fa-check-circle"></i>
              <div>标题要简洁明了，突出主题，吸引眼球</div>
            </li>
            <li>
              <i class="fas fa-check-circle"></i>
              <div>详细描述物品或活动信息，包括时间、地点、联系方式等</div>
            </li>
            <li>
              <i class="fas fa-check-circle"></i>
              <div>上传清晰图片更容易吸引关注，建议上传3-5张</div>
            </li>
            <li>
              <i class="fas fa-check-circle"></i>
              <div>选择正确的分类让更多人看到你的帖子</div>
            </li>
            <li>
              <i class="fas fa-check-circle"></i>
              <div>请勿发布虚假信息、广告或违规内容</div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="footer">

    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();
const fileInput = ref(null);

const post = reactive({
  title: '',
  content: '',
  category: 'trade',
  images: []
});

const categories = [
  { label: '二手交易', value: 'trade', icon: 'fas fa-exchange-alt' },
  { label: '失物招领', value: 'lost', icon: 'fas fa-search' },
  { label: '活动发布', value: 'event', icon: 'fas fa-calendar-alt' },
  { label: '校园拼车', value: 'carpool', icon: 'fas fa-car' },
  { label: '学习资料', value: 'study', icon: 'fas fa-book' },
  { label: '其他', value: 'other', icon: 'fas fa-ellipsis-h' }
];

const selectedCategoryLabel = computed(() => {
  return categories.find(c => c.value === post.category)?.label || '未选择';
});

const triggerUpload = () => {
  fileInput.value.click();
};

const handleFileUpload = (e) => {
  const files = e.target.files;
  if (!files.length) return;

  for (let i = 0; i < files.length; i++) {
    if (post.images.length >= 9) {
      ElMessage.warning('最多只能上传9张图片');
      break;
    }

    const file = files[i];
    if (file.size > 5 * 1024 * 1024) {
      ElMessage.warning(`图片 ${file.name} 大小超过5MB`);
      continue;
    }

    const reader = new FileReader();
    reader.onload = (e) => {
      post.images.push({
        name: file.name,
        url: e.target.result,
        file: file
      });
    };
    reader.readAsDataURL(file);
  }

  fileInput.value.value = '';
};

const removeImage = (index) => {
  post.images.splice(index, 1);
};

const handleSubmit = async () => {
  // 表单验证
  if (!post.title.trim()) {
    ElMessage.error('请输入帖子标题');
    return;
  }

  if (post.title.trim().length < 5) {
    ElMessage.error('标题至少需要5个字');
    return;
  }

  if (!post.content.trim()) {
    ElMessage.error('请输入帖子内容');
    return;
  }

  // 模拟API请求（实际项目中替换为真实接口）
  try {
    // const response = await axios.post('/api/posts', post);
    ElMessage.success('帖子发布成功！');
    setTimeout(() => router.push({ name: 'topic-recommend' }), 500) // 帖子发布成功后跳转到首页
  } catch (error) {
    ElMessage.error('发布失败，请重试');
  }
};

const resetForm = () => {
  post.title = '';
  post.content = '';
  post.category = 'trade';
  post.images = [];
  ElMessage.info('表单已重置');
};
</script>

 <style scoped>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
      color: #333;
      line-height: 1.6;
      min-height: 100vh;
      padding: 20px;
    }
    
    .app-container {
      max-width: 1300px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .header {
      text-align: center;
      margin-bottom: 40px;
      padding: 20px;
    }
    
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;
    }
    
    .logo-icon {
      font-size: 36px;
      color: #3a7afe;
      margin-right: 15px;
    }
    
    .logo-text {
      font-size: 32px;
      font-weight: 800;
      background: linear-gradient(to right, #3a7afe, #5b8cff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .slogan {
      color: #666;
      font-size: 18px;
      margin-top: 10px;
    }
    
    .post-editor-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
      background: white;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }
    
    @media (max-width: 900px) {
      .post-editor-container {
        grid-template-columns: 1fr;
      }
    }
    
    .editor-section {
      padding: 35px;
      background: white;
      border-right: 1px solid #eee;
    }
    
    .preview-section {
      padding: 35px;
      background: #fafcff;
      position: relative;
      overflow: hidden;
    }
    
    .preview-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(to right, #3a7afe, #5b8cff);
    }
    
    .section-title {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: 600;
      color: #3a7afe;
      margin-bottom: 30px;
      padding-bottom: 15px;
      border-bottom: 2px solid #f0f4ff;
    }
    
    .section-title i {
      margin-right: 12px;
      width: 36px;
      height: 36px;
      background: #e8f1ff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .form-item {
      margin-bottom: 25px;
    }
    
    .category-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 10px;
    }
    
    .category-tag {
      padding: 8px 18px;
      background: #f0f7ff;
      border: 1px solid #cce0ff;
      border-radius: 24px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      font-size: 14px;
    }
    
    .category-tag:hover {
      background: #dcecff;
    }
    
    .category-tag.active {
      background: #3a7afe;
      color: white;
      border-color: #3a7afe;
      box-shadow: 0 4px 10px rgba(58, 122, 254, 0.3);
    }
    
    .category-tag i {
      margin-right: 8px;
      font-size: 16px;
    }
    
    .upload-container {
      border: 2px dashed #dcdfe6;
      border-radius: 10px;
      padding: 25px;
      text-align: center;
      background-color: #fafafa;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 10px;
    }
    
    .upload-container:hover {
      border-color: #3a7afe;
      background: #f5f9ff;
    }
    
    .upload-icon {
      font-size: 48px;
      color: #a0c1ff;
      margin-bottom: 15px;
    }
    
    .upload-text {
      color: #606266;
      font-size: 16px;
      margin: 10px 0;
    }
    
    .image-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      gap: 15px;
      margin-top: 25px;
    }
    
    .image-item {
      position: relative;
      height: 100px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
    }
    
    .image-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .image-remove {
      position: absolute;
      right: 5px;
      top: 5px;
      color: white;
      background: rgba(0, 0, 0, 0.6);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .image-remove:hover {
      background: rgba(255, 0, 0, 0.8);
      transform: scale(1.1);
    }
    
    .action-buttons {
      display: flex;
      gap: 20px;
      margin-top: 30px;
      justify-content: center;
    }
    
    .preview-content {
      background: white;
      border-radius: 12px;
      padding: 25px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      border: 1px solid #f0f4ff;
    }
    
    .preview-title {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 18px;
      color: #1a2c50;
      line-height: 1.4;
    }
    
    .preview-text {
      color: #444;
      line-height: 1.8;
      font-size: 16px;
      margin-top: 20px;
      white-space: pre-line;
    }
    
    .preview-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 25px;
    }
    
    .preview-image {
      width: 100%;
      height: 120px;
      object-fit: cover;
      border-radius: 8px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
      transition: all 0.3s;
    }
    
    .preview-image:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .preview-meta {
      display: flex;
      margin-top: 25px;
      padding-top: 20px;
      border-top: 1px solid #eee;
      font-size: 14px;
      color: #777;
    }
    
    .preview-meta-item {
      display: flex;
      align-items: center;
      margin-right: 25px;
    }
    
    .preview-meta-item i {
      margin-right: 8px;
      color: #3a7afe;
    }
    
    .empty-preview {
      text-align: center;
      padding: 50px 20px;
      color: #999;
    }
    
    .empty-preview i {
      font-size: 64px;
      margin-bottom: 20px;
      color: #d0e0ff;
    }
    
    .empty-preview h3 {
      font-size: 18px;
      margin-bottom: 10px;
      color: #666;
    }
    
    .footer {
      text-align: center;
      margin-top: 50px;
      padding: 25px;
      color: #666;
      font-size: 14px;
      border-top: 1px solid #eee;
    }
    
    .divider {
      height: 1px;
      background: linear-gradient(to right, #f0f4ff, #3a7afe, #f0f4ff);
      margin: 30px 0;
    }
    
    .tip-box {
      background: #f0f7ff;
      border-radius: 10px;
      padding: 20px;
      margin-top: 30px;
      border-left: 4px solid #3a7afe;
    }
    
    .tip-title {
      font-weight: 600;
      margin-bottom: 12px;
      color: #3a7afe;
      display: flex;
      align-items: center;
    }
    
    .tip-title i {
      margin-right: 10px;
    }
    
    .tip-list {
      list-style: none;
    }
    
    .tip-list li {
      padding: 6px 0;
      display: flex;
      align-items: flex-start;
    }
    
    .tip-list li i {
      color: #3a7afe;
      margin-right: 10px;
      margin-top: 5px;
    }
  
.app-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 20px;
}

/* 省略重复样式，保留原CSS中的类样式定义 */
/* 注意：原样式中的全局类需要调整为scoped下的局部样式，或使用深度选择器 */
</style>